<template>
    <split-horizontal>
        <template v-slot:header-p>
            <div class="j-title">
                分页容器（JPageContent）
                <div class="j-detail">
                    分页容器，支持上拉加载，下拉刷新，支持版本^0.8.6
                </div>
            </div>
        </template>
        <template v-slot:left-p>
            <div class="content" style="height: 500px">
                <JPageContent @loadMore="loadMoreData" ref="JPageContent">
                    <div v-for="n in nums" :key="n">
                        <div
                            style="
                                height: 100px;
                                width: 400px;
                                text-align: center;
                                line-height: 100px;
                                border: 1px solid gray;
                            "
                        >
                            JPageContent-{{ n }}
                        </div>
                    </div>
                </JPageContent>
            </div>
        </template>
        <template v-slot:right-p>
            <div>
                <j-table :title="tableTitle" :tableData="tableData"> </j-table>
            </div>
        </template>
        <template v-slot:footer-p>
            <pre v-highlight>
                <code class="vue">
                    <div v-text="code"></div>
                </code>
            </pre>
        </template>
    </split-horizontal>
</template>
<script>
import { mixinForView } from "@/mixins/index.js";
export default {
    name: "JPageContentView",
    components: {},
    mixins: [mixinForView],
    data() {
        return {
            code: "",
            tableData: [],
            nums: 10,
        };
    },
    created() {
        this.initTableData();
        this.initCodeContent();
    },
    mounted() {},
    methods: {
        loadMoreData() {
            if (this.nums >= 30) {
                this.$refs.JPageContent.loadMoreComplete();
                return;
            }
            setTimeout(() => {
                this.nums += 10;
                this.$refs.JPageContent.loadMoreComplete();
            }, 1000);
        },
        initCodeContent() {
            this.code = `
<template>
    <div class="content" style="height: 500px">
        <JPageContent @loadMore="loadMoreData" ref="JPageContent">
            <div v-for="n in nums" :key="n">
                <div
                    style="
                        height: 100px;
                        width: 400px;
                        text-align: center;
                        line-height: 100px;
                        border: 1px solid gray;
                    "
                >
                    JPageContent-{{ n }}
                </div>
            </div>
        </JPageContent>
    </div>
</template>

export default {
    data() {
        return {
            nums: 10,
        }
    },
    methods: {
        loadMoreData() {
            if (this.nums >= 30) {
                this.$refs.JPageContent.loadMoreComplete();
                return;
            }
            setTimeout(() => {
                this.nums += 10;
                this.$refs.JPageContent.loadMoreComplete();
            }, 1000);
        }
    }
}
        `;
        },
        initTableData() {
            this.tableData = [
                {
                    parameter: "moreText",
                    field: "加载更多显示文案",
                    type: "String",
                    describe: "默认为：加载中...",
                },
                {
                    parameter: "threshold",
                    field: "接近底部的阈值",
                    type: "String",
                    describe: "可设置接近底部的阈值，这里默认为20px",
                },
                {
                    parameter: "loadMore",
                    field: "到底触发",
                    type: "function",
                    describe: "到底的时候会触发这个函数",
                },
                {
                    parameter: "loadMoreComplete",
                    field: "加载完成",
                    type: "function",
                    describe: "加载完成后调用通知",
                },
            ];
        },
    },
};
</script>
<style scoped lang="less">
.title {
    font-size: x-large;
    text-align: left;
    margin-bottom: 1rem;
    .detail {
        font-size: medium;
        color: dimgrey;
        margin-top: 1rem;
    }
}
.content {
    margin: auto auto;
}
.header {
    min-height: 4rem;
    text-align: center;
}
.footer {
    margin-top: 2rem;
    margin-left: 2%;
    width: 95%;
}
</style>
